<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="elementUI/vue.js"></script>
    <script src="elementUI/echarts.js"></script>
    <script src="elementUI/vue-echarts.js"></script>

</head>

<body>
    <div id="app">
        <div style="width: 500px;height:400px;" id="main"></div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            mounted() {
                let this_ = this;
                let myChart = echarts.init(document.getElementById('main'));
                let option = {
                    color: ['#f44'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '每月花费',
                            type: 'bar',
                            barWidth: '60%',
                            data: [995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356]
                        }
                    ]
                };
                myChart.setOption(option);
            }
            });
    </script>
</body>

</html>